import React, { useState } from "react";

const Form: React.FC = () => {
  const [showForm, setShowForm] = useState(false);
  const [message, setMessage] = useState("");

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setShowForm(false);
    sendMessage(message);
  }

  if (!showForm) {
    return (
      <>
        <h1>谢谢使用我们的服务！</h1>
        <button
          onClick={() => {
            setMessage("");
            setShowForm(true);
          }}
        >
          打开聊天
        </button>
      </>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <textarea placeholder="消息" value={message} onChange={e => setMessage(e.target.value)} />
      <br />
      <button type="submit" disabled={message === ""}>
        发送
      </button>
    </form>
  );
};

function sendMessage(message: string) {
  console.log("发送消息：" + message);
}

export default Form;
